<template>
  <div class="detail-content-second">
    <detail-body title="房屋设施" more="查看全部设施">
        <div class="body">
          <template v-for="(item, index) in houseFacilitys" :key="index">
            <div class="item" v-if="facilitySort.includes(index)">
              <div class="main">
                <img :src="item.icon" alt="">
                <div>{{ item.groupName }}</div>
              </div>
              <div class="content">
                <template v-for="(children,renindex) in item.facilitys.slice(0,4)" :key="renindex">
                  <div class="child">
                    <i class="icon_check icon"></i>
                    <span>{{ children.name }}</span>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
    </detail-body>
  </div>
</template>

<script setup>
import DetailBody from '@/components/detail-body/detail-body.vue';
const props = defineProps({
  houseFacilitys:{
    type:Object,
    default:()=>([])
  },
  facilitySort:{
    type:Array,
    default:() => ([])
  }
})

</script>

<style lang="less" scoped>
  .body {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: flex-start;
    margin: 5px;
    padding: 15px;
    background-color: #f2f2f2;
    .item {
      display: flex;
      width: 100%;
      margin: 15px;
      .main {
       text-align: center;
        margin-right: 15px;
        img {
          width: 30px;
          padding: 4px  15px;
        }
      }

      .content {
        flex:1;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        .child {
          width: 50%;
        }
      }
    }
  }
</style>